<template>
  <div id="mesworkingprocedure-add-or-update">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="工序名称" prop="workingProcedureName">
              <el-input v-model="dataForm.workingProcedureName" placeholder="工序名称"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="工序性质" prop="workingProcedureProperty">
              <el-input v-model="dataForm.workingProcedureProperty" placeholder="工序性质"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="父工序" prop="parentWorkingProcedureNum">
              <el-select v-model="dataForm.parentWorkingProcedureNum" placeholder="父工序" clearable>
                <el-option
                  v-for="item in parentWorkingProcedureList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="是否启用" prop="enabledFlg">
              <el-select v-model="dataForm.enabledFlg" placeholder="是否启用" clearable>
                <el-option
                  v-for="item in enabledFlgList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>  
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="设备" prop="equipmentCode">
              <el-input v-model="dataForm.equipmentCode" placeholder="设备"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="工时" prop="workingHours">
              <el-input v-model="dataForm.workingHours" placeholder="工时"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="每日产能" prop="dailyCapacity">
              <el-input v-model="dataForm.dailyCapacity" placeholder="每日产能"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="顺序" prop="displaySort">
              <el-input v-model="dataForm.displaySort" placeholder="顺序"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <div style="clear:both;"></div>
      <el-form-item label="工业要求" prop="workInstructionNum">
        <el-upload
          style="margin-left:5%;"
          class="file-upload"
          :on-change="onChange"
          ref="uploadfile"
          :action="uploadUrl"
          :data="dataForm"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="1"
          :file-list="fileList"
          :on-error="error"
          :on-success = "uploadSuccess"
          :auto-upload="false"
          :on-exceed="handleExceed">
          <el-button size="small" type="primary" icon="el-icon-upload">上传 见作业/检查指导书</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="footer">
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      <el-button @click="cancel()">取消</el-button>
    </span>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          token: this.$cookie.get('token'),
          id:'',
          workingProcedureNum: '',
          workingProcedureName: '',
          workingProcedureProperty: '',
          workingHours: '',
          dailyCapacity: '',
          parentWorkingProcedureNum: '',
          enabledFlg: '',
          equipmentCode: '',
          workInstructionNum: '',
          displaySort: ''
        },
        enabledFlgList: [],
        parentWorkingProcedureList: [],
        uploadUrl: '',
        fileList: [],
        haveFileFlg: '',
        dataRule: {
          workingProcedureName: [
            { required: true, message: '工序名称不能为空', trigger: 'blur' }
          ],
          enabledFlg: [
            { required: true, message: '是否启用不能为空', trigger: 'blur' }
          ],
          displaySort: [
            { required: true, message: '顺序不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    mounted(){
      this.init(this.$route.params.id)
      this.getDictList()
    },
    methods: {
      init (id) {
        this.dataForm.id = id
        this.visible = true
        this.$nextTick(() => {    
          this.$refs['dataForm'].resetFields()
          if (id) {
            this.$http({
              url: this.$http.adornUrl(`/basic/mesworkingprocedure/info/${id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              console.log(data)
              if (data && data.code === 0) {
                this.dataForm.id = data.mesWorkingProcedure.workingProcedureNum,
                this.dataForm.workingProcedureNum = data.mesWorkingProcedure.workingProcedureNum
                this.dataForm.workingProcedureName = data.mesWorkingProcedure.workingProcedureName
                this.dataForm.workingProcedureProperty = data.mesWorkingProcedure.workingProcedureProperty
                this.dataForm.workingHours = data.mesWorkingProcedure.workingHours
                this.dataForm.dailyCapacity = data.mesWorkingProcedure.dailyCapacity
                this.dataForm.parentWorkingProcedureNum = data.mesWorkingProcedure.parentWorkingProcedureNum
                this.dataForm.enabledFlg = data.mesWorkingProcedure.enabledFlg
                this.dataForm.equipmentCode = data.mesWorkingProcedure.equipmentCode
                this.dataForm.workInstructionNum = data.mesWorkingProcedure.workInstructionNum
                this.dataForm.displaySort = data.mesWorkingProcedure.displaySort
              }
              if (data.mesWorkInstructionInfoEntity) {
                this.fileList = [
                  { name: data.mesWorkInstructionInfoEntity.fileName }
                ]
                this.haveFileFlg = 'yes'
              }
            })
          }
        })
      },
      // 获取字典数据列表
      getDictList(){
        this.dataListLoading = true
        let arr = ['sys_yes_no','parent_wp']
        this.$http({
          url:this.$http.adornUrl('/basic/mescodemasterm/dataList'),
          method: 'post',
          data: this.$http.adornParams(arr, false)
        }).then(({data}) => {
          if( data && data.code === 0 ) {
            data.sys_yes_no.forEach((item, index) => {
            let obj = {}
            obj.code = item.code
            obj.name = item.name
            this.enabledFlgList.push(obj)
            })
            data.parent_wp.forEach((item, index) => {
            let obj = {}
            obj.code = item.code
            obj.name = item.name
            this.parentWorkingProcedureList.push(obj)
            })
          }else {
          }
          this.dataListLoading = false
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let formData = new FormData()
            formData.append('workingProcedureNum', this.dataForm.workingProcedureNum)
            formData.append('workingProcedureName', this.dataForm.workingProcedureName)
            formData.append('workingProcedureProperty', this.dataForm.workingProcedureProperty)
            formData.append('workingHours', this.dataForm.workingHours)
            formData.append('dailyCapacity', this.dataForm.dailyCapacity)
            formData.append('parentWorkingProcedureNum', this.dataForm.parentWorkingProcedureNum)
            formData.append('enabledFlg', this.dataForm.enabledFlg)
            formData.append('equipmentCode', this.dataForm.equipmentCode)
            formData.append('workInstructionNum', this.dataForm.workInstructionNum)
            formData.append('displaySort', this.dataForm.displaySort)
            formData.append('haveFileFlg', this.haveFileFlg)
            if (this.fileList[0] && this.fileList[0].raw && this.fileList[0].raw.size > 0) {
              formData.append('file', this.fileList[0].raw)
            }
            this.$http({
              url: this.$http.adornUrl(`/basic/mesworkingprocedure/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: formData
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    eventBus.$emit('closeCurrentPage')
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 取消
      cancel(){
        eventBus.$emit('closeCurrentPage')
      },
      // 选择时触发方法临时保存文件
      onChange(file) {
        this.fileList.push(file)
      },
      // 文件预览
      handlePreview(file) {
      },
      // 文件删除
      handleRemove(file) {
        this.fileList = []
        if (!this.fileList.length) {
          this.haveFileFlg = 'no'
        } else {
          this.haveFileFlg = 'yes'
        }
        return this.$message.success(`文件已经被删除！`)
      },
      // 删除前触发方法
      beforeRemove(file) {
        return this.$confirm(`确定移除${file.name}？`)
      },   
      // 错误提示
      error(err) {
        this.$message.error(err)
      },   
      // 文件成功上传
      uploadSuccess(file) {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 3500,
          onClose: () => {
            this.visible = false
          }
        })
        eventBus.$emit('closeCurrentPage')
      },
      // 文件数量检查
      handleExceed(files) {
        this.$message.warning(`最多只能上传一个文件`)
      }
    }
  }
</script>

<style lang="scss" scoped>
#mesworkingprocedure-add-or-update {
  width: 90%;
  margin: 15px auto 0;
  .el-form{
    margin: 0px 0px 15%;
    .el-form-item {
      .el-select {
        width: 350px;
      }
      .el-input {
        width: 350px;
      }
      .file-upload {
        margin-left: 80px !important;
        text-align: left;
      }
    }
  }
  
  .footer {
    display: block;
    text-align: center;
  }
}
</style>